<template>
    <div>
        <!-- 修改姓名 -->
        <el-dialog :title="$t('common.editName')" :visible.sync="showEditName" width="460px" :close-on-click-modal="false">
            <el-form :model="nameForm">
                <el-form-item label="Last Name">
                    <el-input v-model.trim="nameForm.lastName" placeholder="Last Name" type="text"
                        maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="First Name">
                    <el-input v-model.trim="nameForm.firstName" placeholder="First Name" type="text"
                        maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="Middle Name">
                    <el-input v-model.trim="nameForm.middleName" placeholder="Middle Name" type="text"
                        maxlength="50"></el-input>
                </el-form-item>
                <el-form-item>
                    <div v-show="nameForm.showErrorMsg" class="error_tips color_red">{{ $t('common.emptyNameTips') }}</div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showEditName = false" type="default">{{ $t('common.cancel') }}</el-button>
                <el-button @click="handleEditName" type="primary">{{ $t('common.modify') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showEditName: false,
            nameForm: {
                firstName: '',
                middleName: '',
                lastName: '',
                orderId: '',
                showErrorMsg: false,
            },
        }
    },
    methods: {
        init() {
            this.nameForm = {
                firstName: '',
                middleName: '',
                lastName: '',
                orderId: '',
                showErrorMsg: false,
            }
        },
        showEdit(info) {
            this.init();
            this.showEditName = true;
            this.nameForm.orderId = info.orderId
        },
        handleEditName() {
            const { firstName, middleName, lastName, orderId } = this.nameForm;
            if (!firstName && !middleName && !lastName) {
                this.nameForm.showErrorMsg = true;
                return;
            }
            const params = { firstName, middleName, lastName, orderId };
            this.$api.finance.loan.renamePayout(params).then(res => {
                const { status, data } = res;
                if ('1' === status && data) {
                    const { firstName, middleName, lastName } = data;
                    if (data.modifyStatus) {
                        // this.$message.success(this.$tc('common.modifySuccess')); // 修改成功
                        this.$alert(`
                                        <div>Last Name: ${lastName}</div>
                                        <div>First Name: ${firstName}</div>
                                        <div>Middle Name: ${middleName}</div>`,
                            this.$tc('common.modifySuccess'),
                            { dangerouslyUseHTMLString: true });
                    } else {
                        this.$message.error(data.remark || this.$tc('common.modifyFail')); // 修改失败
                    }
                    this.showEditName = false;
                    this.$emit('EditSuc')
                }
            });
        },
    }
}
</script>